<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue 12 13</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">{{msg}}
        <mybutton>
            <mybutton></mybutton>
            <mybutton></mybutton>
        </mybutton>
        <test1></test1>
    </div>
    <script text="text/javascript">
        Vue.component('mybutton', {
            // data: function () {
            //     return {
            //         count: 0
            //     }
            // },
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                myClick() {
                    this.count++;
                },
            },

            template: '<div><h1>结果: {{count}}</h1><button @click="myClick">VueButton {{count}}</button><slot></slot></div>',
        });

        var app = new Vue({
            el: '#app',
            data: {
                msg: "I am coming!",
            },
            components: {
                test1: {
                    template: "<p @dblclick='dbClick'>test1</p>",
                    methods: {
                        dbClick() {
                            alert("hh");
                        }
                    }
                },
            },
        });
    </script>
</body>